<template>
  <!-- search模块 -->
  <div class="search-container">
    <el-input v-model="inputValue" @focus="handleFocus" @blur="handleBlur" @keyup.enter="handleEnter"
      @input="handleInput" style="width: 360px; height: 45px" placeholder="搜索位置、公交站、地铁站" class="input-with-select"
      id="inputSearch">
      <template #prepend>
        <img style="width: 34px; height: 34px" src="/gaode.png" alt="search" />
      </template>
      <template #suffix>
        <el-button :icon="Search" @click="handleSearch" />
      </template>
      <template #append>
        <img style="width: 20px; height: 20px;cursor: pointer;" src="/dir.png" alt="search" @click="handleDirection" />
      </template>
    </el-input>
  </div>
  <!-- 导航组件 -->
  <DirView />
  <div class="search-result" v-if="searchResultVisible">
    <div class="search-result-recommend">
      <div class="search-result-recommend-item" @mousedown="handleRecommendClick('美食')">
        <img src="/search_food.png" alt="" />
        <div class="search-result-recommend-item-title">
          <span>美食</span>
        </div>
      </div>
      <div class="search-result-recommend-item" @mousedown="handleRecommendClick('酒店')">
        <img src="/search_hotel.png" alt="" />
        <div class="search-result-recommend-item-title">
          <span>酒店</span>
        </div>
      </div>
      <div class="search-result-recommend-item" @mousedown="handleRecommendClick('景点')">
        <img src="/search_view.png" alt="" />
        <div class="search-result-recommend-item-title">
          <span>景点</span>
        </div>
      </div>
      <div class="search-result-recommend-item" @mousedown="handleRecommendClick('小区')">
        <img src="/search_house.png" alt="" />
        <div class="search-result-recommend-item-title">
          <span>小区</span>
        </div>
      </div>
    </div>
    <div class="search-result-history">
      <div>
        <span><i class="iconfont icon-shijian"></i></span>
        <span>海底捞火锅</span>
      </div>
      <div>
        <span><i class="iconfont icon-shijian"></i></span>
        <span>海底捞火锅</span>
      </div>
      <div>
        <span><i class="iconfont icon-shijian"></i></span>
        <span>海底捞火锅</span>
      </div>
    </div>
    <div class="phone-download">
      <div class="phone-download-content">
        <span class="phone-download-title">高德地图手机版</span>
        <span class="phone-download-subtitle">高德地图 哪儿都熟</span>
        <span class="phone-download-btn">去官网下载</span>
      </div>
      <div class="phone-download-qrcode"><img src="/bannerQrcode-1.png" alt="" /></div>
    </div>
  </div>
  <!-- 搜索结果展示仪表盘 -->
  <SearchView />
  <!-- 城市选择器和天气信息容器 -->
  <div class="city-weather-container">
    <div class="city-picker-container">
      <el-popover placement="bottom-start" width="300" trigger="click" v-model:visible="cityPickerVisible"
        popper-class="custom-city-picker-popover">
        <template #reference>
          <el-button>{{ selectedCity }}<el-icon>
              <ArrowDown />
            </el-icon></el-button>
        </template>

        <div class="city-picker-content">
          <div class="picker-header">
            <span>当前城市：{{ selectedCity }}</span>
            <el-icon @click="cityPickerVisible = false">
              <Close />
            </el-icon>
          </div>
        </div>

        <div class="section">
          <div class="hot-cities">
            <el-tag v-for="city in hotCities" :key="city" @click="selectCity(city)">{{
              city
            }}</el-tag>
          </div>
        </div>
        <div class="search-controls">
          <el-radio-group v-model="cityListMode" @change="handleChange" size="small">
            <el-radio-button label="province" value="province">按省份 </el-radio-button>
            <el-radio-button label="city" value="city">按城市</el-radio-button>
          </el-radio-group>
          <el-input placeholder="请输入城市" v-model="searchKeyword" class="city-search-input">
            <template #prefix>
              <el-icon>
                <Search />
              </el-icon>
            </template>
          </el-input>
        </div>
        <div class="provinceType" v-if="cityListMode === 'province'">
          <div class="zimu">
            <span>A</span>
            <span>F</span>
            <span>G</span>
            <span>H</span>
            <span>J</span>
            <span>L</span>
            <span>N</span>
            <span>Q</span>
            <span>S</span>
            <span>T</span>
            <span>X</span>
            <span>Y</span>
            <span>Z</span>
          </div>
          <div class="shengfen" v-for="province in provinceData" :key="province.name">
            <span>{{ province.name }}：</span>
            <ul>
              <li v-for="city in province.cities" :key="city" @click="selectCity(city)">
                {{ city }}
              </li>
            </ul>
          </div>
        </div>
        <div class="cityType" v-if="cityListMode === 'city'">
          <div class="zimu">
            <span v-for="city in cityData" :key="city.name">{{ city.name }}</span>
          </div>
          <div class="shengfen" v-for="city in cityData" :key="city.name">
            <span>{{ city.name }}：</span>
            <ul>
              <li v-for="city in city.cities" :key="city" @click="selectCity(city)">{{ city }}</li>
            </ul>
          </div>
        </div>

      </el-popover>
    </div>
    <div class="weather-info" :class="{ 'show-weather': weatherVisible }">
      <span>{{ dayWeather }}</span>
      <span>{{ nightTemp }}/{{ dayTemp }}℃</span>
    </div>
  </div>


  <!-- 地图功能按钮组 - 使用复选框替代单选按钮组 -->

  <div class="map-controls">
    <el-checkbox v-model="roadNetVisible" @change="toggleRoadNet" class="map-control-item road-net-item"
      :class="{ 'show-roadnet': satelliteVisible }">
      <i class="iconfont icon-road"></i>
      <span>路网</span>
    </el-checkbox>

    <el-checkbox v-model="satelliteVisible" @change="toggleSatellite" class="map-control-item">
      <i class="iconfont icon-satellite"></i>
      <span>卫星</span>
    </el-checkbox>

    <el-checkbox v-model="airVisible" @change="toggleAir" class="map-control-item">
      <i class="iconfont icon-wumaizhuanhuan"></i>
      <span>空气</span>
    </el-checkbox>

    <el-checkbox v-model="trafficVisible" @change="toggleTraffic" class="map-control-item">
      <i class="iconfont icon-traffic"></i>
      <span>路况</span>
    </el-checkbox>

    <el-checkbox v-model="distanceVisible" @change="toggleDistance" class="map-control-item">
      <i class="iconfont icon-ranging"></i>
      <span>测距</span>
    </el-checkbox>

    <el-checkbox class="map-control-item">
      <i class="iconfont icon-subway-line"></i>
      <span>地铁</span>
    </el-checkbox>

    <el-checkbox v-model="fullScreenVisible" @change="toggleFullScreen" class="map-control-item">
      <i class="iconfont icon-fullscreen"></i>
      <span>全屏</span>
    </el-checkbox>
  </div>
  <div class="traffic-control" :class="{ 'show-traffic': trafficVisible }">
    <div class="traffic-control-info">
      <div class="traffic-control-info-title">实时</div>
      <span>畅通</span>
      <div class="level">
        <span class="level-1"></span><span class="level-2"></span><span class="level-3"></span><span
          class="level-4"></span>
      </div>
      <span>拥堵</span>
    </div>
    <div class="traffic-control-time">
      <span>更新时间</span><span>{{ nowTime }}</span>
    </div>
  </div>

  <!-- 地图容器 -->
  <div>
    <div id="container"></div>
  </div>
</template>
<script setup>
// 导入icon图标对应的组件
import { Search, ArrowDown, Close } from '@element-plus/icons-vue'
import { ref, onMounted, watch, } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import { useRouter } from 'vue-router'
import { provide } from 'vue'
import SearchView from './views/SearchView.vue'
import DirView from './views/DirView.vue'

const router = useRouter()

const selectedCity = ref('全国')
const adress = ref('')
const geocoder = ref(null)
const cityListMode = ref('province')
const weatherVisible = ref(false)
const weather = ref(null)
// 定义天气信息
const nightTemp = ref('')
const dayTemp = ref('')
const dayWeather = ref('')
// 创建清除搜索标记的方法引用
const clearSearchMarkers = ref(null)

window._AMapSecurityConfig = {
  securityJsCode: 'd0a81e48f8e26780745d02c813b36a02',
}

let AMap = null
const map = ref(null)
// 创建响应式的 AMap 引用
const aMapRef = ref(null)

// 在 setup 顶层立即提供数据
provide('mapAMap', {
  map: map,
  AMap: aMapRef,
})

// App.vue (创建引用) 
// ↓ provide
// SearchView.vue(注入引用 + 赋值函数)
// ↑ 通过引用传递函数
// App.vue(调用函数)


// 提供给子组件
provide('clearSearchMarkers', clearSearchMarkers)
// 处理导航功能
const handleDirection = () => {
  // 安全地调用清除方法
  if (clearSearchMarkers.value) {
    clearSearchMarkers.value()
  }
  router.push('/dir')
  document.querySelector('.dir-container').style.display = 'block'
}



// 处理定位功能--设置为单独的函数
const handleGeocoding = (newCity) => {
  if (newCity === '全国') {
    // 设置为缩放级别 4，中心点为中国地理中心，能完整显示中国全境
    map.value.setZoomAndCenter(4, [104.195397, 35.86166], false, 300)
    weatherVisible.value = false
    return
  }

  geocoder.value.getLocation(newCity, (status, result) => {
    if (status === 'complete' && result.info === 'OK') {
      const lng = result.geocodes[0].location.lng
      const lat = result.geocodes[0].location.lat
      map.value.setZoomAndCenter(10, [lng, lat], false, 200) // 200ms 快速移动
    }
  })
}
// 监听城市的变化
watch(selectedCity, (newCity) => {
  adress.value = newCity
  handleGeocoding(newCity)
})

const cityPickerVisible = ref(false)
// 地图功能状态变量
const satelliteVisible = ref(false)
const roadNetVisible = ref(false)
const trafficVisible = ref(false)
const satellite = ref(null) //卫星图层变量
const roadNet = ref(null) //路网图层变量
const traffic = ref(null) //实时路况变量
const mouseTool = ref(null)
// 搜索框输入值
const inputValue = ref('')
const searchResultVisible = ref(false)
provide('isShow', { inputValue, searchResultVisible })




// 处理搜索推荐事件
const handleRecommendClick = (type) => {
  inputValue.value = type
  router.push(`/search/${type}`)
}


// 搜索框聚焦事件
const handleFocus = () => {
  searchResultVisible.value = true
}
// 搜索框失焦事件
const handleBlur = () => {
  searchResultVisible.value = false
}
// 搜索框回车事件
const handleEnter = () => {
  router.push(`/search/${inputValue.value}`)
}
// 搜索按钮事件
const handleSearch = () => {
  router.push(`/search/${inputValue.value}`)
}
// 搜索输入事件
const handleInput = () => {
  searchResultVisible.value = false
  const autoOptions = {
    city: '全国', //city 限定城市，默认全国
    input: 'inputSearch',
  }
  const autoComplete = new AMap.AutoComplete(autoOptions)
  //注册监听，当选中某条记录时会触发
  autoComplete.on('select', (e) => {
    inputValue.value = e.poi.name
    // 执行搜索
    router.push(`/search/${e.poi.name}`)
    searchResultVisible.value = false
  })
}

//处理定位功能；选择城市
const selectCity = (city) => {
  selectedCity.value = city
  cityPickerVisible.value = false
  weatherVisible.value = true
  queryWeather(city)
}

// 卫星图层显示隐藏函数
const toggleSatellite = (checked) => {
  if (checked) {
    map.value.addLayer(satellite.value)
  } else {
    map.value.removeLayer(satellite.value)
  }
}

// 路网图层显示隐藏函数
const toggleRoadNet = (checked) => {
  if (checked) {
    map.value.addLayer(roadNet.value)
  } else {
    map.value.removeLayer(roadNet.value)
  }
}

// 实时路况图层显示隐藏
const toggleTraffic = (checked) => {
  if (checked) {
    map.value.addLayer(traffic.value)
  } else {
    map.value.removeLayer(traffic.value)
  }
}

// 测距功能显示隐藏
const toggleDistance = (checked) => {
  // 确保 mouseTool 已经初始化
  if (!mouseTool.value) {
    mouseTool.value = new AMap.MouseTool(map.value)
  }
  if (checked) {
    // 开启测距功能
    mouseTool.value.rule({
      startMarkerOptions: {
        //设置量测起始点标记属性对象 可缺省
        icon: new AMap.Icon({
          size: new AMap.Size(19, 31), //图标大小
          imageSize: new AMap.Size(19, 31),
          image: '//webapi.amap.com/theme/v1.3/markers/b/start.png',
        }),
        offset: new AMap.Pixel(-9, -31),
      },
      endMarkerOptions: {
        //设置量测结束点标记属性对象 可缺省
        icon: new AMap.Icon({
          size: new AMap.Size(19, 31), //图标大小
          imageSize: new AMap.Size(19, 31),
          image: '//webapi.amap.com/theme/v1.3/markers/b/end.png',
        }),
        offset: new AMap.Pixel(-9, -31),
      },
      midMarkerOptions: {
        //设置拖拽路线插件途经点点标记属性对象 可缺省
        icon: new AMap.Icon({
          size: new AMap.Size(19, 31), //图标大小
          imageSize: new AMap.Size(19, 31),
          image: '//webapi.amap.com/theme/v1.3/markers/b/mid.png',
        }),
        offset: new AMap.Pixel(-9, -31),
      },
      lineOptions: {
        //可缺省
        strokeStyle: 'solid',
        strokeColor: '#FF33FF',
        strokeOpacity: 1,
        strokeWeight: 2,
      },
    })
    mouseTool.value.on('draw', () => {
      mouseTool.value.close(false)
    })
  } else {
    mouseTool.value.close(false)
  }
}
//加载省市数据
const provinceData = ref([])
const cityData = ref([])
const loadCityData = async () => {
  // 加载省份数据
  const response = await fetch('/province-city-data.json')
  const result = await response.json()
  provinceData.value = result
  // 加载城市数据
  const response2 = await fetch('/cities-by-letter.json')
  const results2 = await response2.json()
  cityData.value = results2
}
// 创建一个天气查询函数
const queryWeather = (city) => {
  if (weather.value) {
    weather.value.getForecast(city, function (err, data) {
      console.log(data.forecasts[0])
      nightTemp.value = data.forecasts[0].nightTemp
      dayTemp.value = data.forecasts[0].dayTemp
      dayWeather.value = data.forecasts[0].dayWeather
    })
  }
}


// 在 onMounted 中初始化地图
onMounted(async () => {
  loadCityData()
  AMap = await AMapLoader.load({
    key: '9695f32a232f3df9ba5917fa54a9b645',
    version: '2.0',
    plugins: [
      'AMap.ToolBar',
      'AMap.Scale',
      'AMap.MapType',
      'AMap.Geolocation',
      'AMap.ControlBar',
      'AMap.MouseTool',
      'AMap.PlaceSearch',
      'AMap.AutoComplete',
      'AMap.Geolocation',
      'AMap.Geocoder',
      'AMap.Weather'
    ],
  })

  // 更新响应式的 AMap 引用
  aMapRef.value = AMap

  map.value = new AMap.Map('container', {
    viewMode: '3D',
    zoom: 10,
    center: [116.327911, 39.939229],
    mapStyle: 'amap://styles/normal',
  })

  //添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
  map.value.addControl(
    new AMap.ToolBar({
      position: {
        bottom: '10px',
        right: '20px',
      },
    }),
  )
  //添加比例尺控件，展示地图在当前层级和纬度下的比例尺
  map.value.addControl(new AMap.Scale())
  //添加定位控件，用来获取和展示用户主机所在的经纬度位置
  map.value.addControl(
    new AMap.Geolocation({
      position: {
        bottom: '80px',
        right: '20px',
      },
    }),
  )
  //添加控制罗盘控件，用来控制地图的旋转和倾斜
  map.value.addControl(
    new AMap.ControlBar({
      position: {
        bottom: '110px',
        right: '-10px',
      },
    }),
  )
  // 初始化地理编码器
  geocoder.value = new AMap.Geocoder({})
  // 初始化天气
  weather.value = new AMap.Weather()

  //创建卫星图层
  satellite.value = new AMap.TileLayer.Satellite()
  //创建路网图层
  roadNet.value = new AMap.TileLayer.RoadNet()
  // 创建实时路况图层
  traffic.value = new AMap.TileLayer.Traffic()
  //创建测距功能实例
  mouseTool.value = new AMap.MouseTool(map.value)
})

const hotCities = ref([
  '全国',
  '北京',
  '天津',
  '沈阳',
  '大连',
  '上海',
  '南京',
  '苏州',
  '杭州',
  '青岛',
  '郑州',
  '武汉',
  '长沙',
  '武汉',
  '长沙',
  '深圳',
  '重庆',
  '成都',
  '西安',
  '香港',
  '澳门',
])
// 获取实时时间
let nowTime = null
const d = new Date()
const year = d.getFullYear()
const month = d.getMonth() + 1
const day = d.getDate()
const hour = d.getHours()
const minute = d.getMinutes()
nowTime = `${year}/${month}/${day} ${hour}:${minute}`
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

#container {
  width: 100vw;
  height: 100vh;
}

.amap-luopan {
  width: 64px;
  height: 64px;
}

// 调整罗盘大小
.amap-controlbar {
  transform: scale(0.8);
}

// 搜索提示的样式
.amap-sug-result {
  width: 360px !important;
  background-color: #ffffff !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  padding: 12px !important;
  position: fixed !important;
  top: 56px !important;
  left: 10px !important;
  z-index: 999 !important;
  max-height: 300px !important;
  overflow-y: auto !important;
}

// 搜索结果的样式
.search-result {
  width: 360px;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 12px;
  position: fixed;
  top: 60px;
  left: 10px;
  z-index: 999;

  .search-result-recommend {
    display: flex;
    justify-content: space-between;
    padding: 2 14px;
    border-bottom: 1px dashed #bdb9b9;

    .search-result-recommend-item {
      width: 80px;
      height: 100px;
      font-size: 13px;

      img {
        width: 46px;
        height: 46px;
      }

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2px;
      cursor: pointer;

      &:hover {
        background-color: #f8f8f8;
      }
    }
  }

  .search-result-history {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;

    div {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      font-size: 13px;

      &:hover {
        background-color: #f8f8f8;
      }
    }
  }

  .phone-download {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;

    .phone-download-title {
      color: #1a66ff;
      font-size: 16px;
      font-weight: bold;
    }

    .phone-download-subtitle {
      font-size: 13px;
      color: #999;
    }

    .phone-download-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 124px;
      height: 34px;
      background-color: #1a6cff;
      border-radius: 17px;
      font-size: 13px;
      color: #ffffff;
    }

    .phone-download-qrcode {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .phone-download-content {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 10px 0;
    }

    img {
      width: 88px;
      height: 88px;
    }
  }
}

.search-container {
  border: 1px solid #ccc;
  border-radius: 5px;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 999;
}

// 完全移除输入框所有边框
.el-input {
  .el-input__wrapper {
    box-shadow: none !important;
    // background: transparent !important;
    padding: 0 !important;
  }

  .el-input__inner {
    border: none !important;
    box-shadow: none !important;
    margin: 0 10px !important; // 添加左右外边距
    padding: 0 5px !important; // 添加内边距
  }

  .el-input-group__prepend,
  .el-input-group__append,
  .el-input-group__suffix {
    border: none !important;
    // background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

// 调整输入框前置插槽的宽度
.el-input-group__prepend {
  width: 45px !important;
  padding: 0 !important;
  display: flex;
  justify-content: center;
  border: none !important;
  align-items: center;
}

// 移除按钮边框
.el-button {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  margin-right: 10px;

  &:hover,
  &:focus {
    border: none !important;
    background: transparent !important;
  }
}

// 调整输入框后置插槽的宽度
.el-input-group__append {
  width: 45px !important;
  padding: 10px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-icon {
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
}

// 城市选择器和天气信息的容器
.city-weather-container {
  position: fixed;
  top: 18px;
  left: 460px;
  z-index: 999;
  display: flex;
  align-items: center;
}

.city-picker-container {

  // 移除原来的 position: fixed 和定位属性
  .el-button {
    font-size: 12px !important;
    font-weight: bold;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    padding: 0 10px !important;
    background: #ffffff !important;

    &:hover,
    &:focus {
      border: 1px solid #ccc;
    }

    .el-icon {
      font-size: 12px !important;
      font-weight: bold !important;
    }
  }
}

// 天气展示板块样式
.weather-info {
  background-color: #ffffff;
  // 移除原来的 position: fixed 和定位属性
  width: 74px;
  height: 32px;
  font-size: 12px !important;
  border: 1px solid #ccc !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  transition: background-color 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  // 初始状态：隐藏
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;

  &.show-weather {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* 浮层整体样式 - 注意这里不需要 scoped，因为 popper-class 的浮层挂载在 body 下 */
.custom-city-picker-popover {
  width: 450px !important;
  /* 修改这里的宽度值 */
  max-height: 320px !important;
  padding: 0px !important;
  /* 移除 Element UI Popover 默认的内边距 */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  /* 确保内部内容不会溢出圆角 */
}

/* Popover 内部内容的布局 */
.city-picker-content {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: bold;
  padding: 0 10px;
  height: 30px;
  border-bottom: 1px solid #ccc;

  .picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    .el-icon {
      font-size: 14px !important;
      font-weight: bolder !important;
    }
  }
}

.section {
  padding: 0 10px;
  margin: 5px 0;

  .hot-cities {
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;

    .el-tag {
      padding: 0 3px;
      background-color: transparent !important;
      border: none !important; // 去掉边框
      text-align: center;
      cursor: pointer;

      &:hover {
        color: #409eff; // 悬停时的颜色
        text-decoration: underline;
      }
    }
  }
}

.search-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  margin-top: 5px;

  .el-radio-group {
    display: flex;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;

    :deep(.el-radio-button__inner) {
      padding: 6px 10px;
      border: none;
      box-shadow: none !important;
      font-size: 12px;
    }
  }

  .city-search-input {
    height: 23px;
    border-radius: 4px;
    flex: 1;
    border: 1px solid #eee;

    :deep(.el-input__wrapper) {
      padding: 0 10px;
      height: 30px;
      border-radius: 4px;
      box-shadow: 0 0 0 1px #ddd inset !important;
      display: flex;
      align-items: center;
    }

    :deep(.el-input__prefix) {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
      margin-left: 5px;
      padding: 0;
    }

    :deep(.el-input__inner) {
      font-size: 12px;
    }

    :deep(.el-icon) {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 14px !important;
      color: #999;
      width: 14px !important;
      height: 14px !important;
      margin: 0;
    }
  }
}

// popover弹出框的省份选择和城市选择页面样式
.provinceType {
  padding: 0 10px;
  max-height: 200px;
  overflow-y: scroll;
  margin-top: 5px;

  .zimu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky; // 添加粘性定位
    top: 0; // 固定在顶部
    background-color: #ffffff; // 添加背景色，避免内容透过
    z-index: 10; // 确保在其他内容之上
    padding: 5px 0; // 添加一些内边距
    margin-bottom: 5px; // 与下面内容保持间距

    span {
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      background-color: #f5f5f5;
    }
  }

  .shengfen {
    display: flex;
    margin-top: 10px;
    margin-bottom: 8px;
    font-size: 13px;

    span {
      font-weight: bold;
      min-width: 60px; // 设置最小宽度
      padding: 2px 2px;
      align-self: flex-start;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      color: #666;
      margin: 0;
      padding: 0;

      li {
        list-style: none;
        padding: 2px 2px;
        cursor: pointer;
        transition: background-color 0.2s;

        &:hover {
          background-color: #f0f9ff;
          color: #409eff;
        }
      }
    }
  }
}

.cityType {
  padding: 0 10px;
  max-height: 200px;
  overflow-y: scroll;
  margin-top: 5px;

  .zimu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky; // 添加粘性定位
    top: 0; // 固定在顶部
    background-color: #ffffff; // 添加背景色，避免内容透过
    z-index: 10; // 确保在其他内容之上
    padding: 5px 0; // 添加一些内边距
    margin-bottom: 5px; // 与下面内容保持间距

    span {
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      background-color: #f5f5f5;
    }
  }

  .shengfen {
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 13px;

    span {
      font-weight: bold;
      min-width: 30px; // 设置最小宽度
      padding: 2px 2px;
      align-self: flex-start;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      color: #666;
      margin: 0;
      padding: 0;

      li {
        list-style: none;
        padding: 2px 2px;
        cursor: pointer;
        transition: background-color 0.2s;

        &:hover {
          background-color: #f0f9ff;
          color: #409eff;
        }
      }
    }
  }
}

// 新增地图控制按钮样式
.map-controls {

  position: fixed;
  top: 10px;
  right: 100px;
  z-index: 999;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 446px;


  // 1. 对 el-checkbox 容器本身(.map-control-item)只做基础的样式控制
  .map-control-item {
    width: 74px;
    height: 45px;
    margin: 0 !important; // 移除默认外边距
    cursor: pointer;
    border-right: 1px dashed #e0e0e0; // 分隔线
    display: flex; // 让label能撑满
    flex: 1;
    align-items: center;

    &:last-child {
      border-right: none;
    }

    // 2. 完全隐藏复选框相关元素 - 更彻底的方式
    .el-checkbox__input {
      display: none !important;
    }

    // 3. 将 flex 布局应用到标签内容(.el-checkbox__label)上
    .el-checkbox__label {
      width: 100%;
      padding-left: 0 !important;
      display: flex;
      align-items: center; // 垂直居中对齐
      justify-content: center; // 水平居中对齐
      gap: 5px;

      .iconfont {
        display: flex;
        align-items: center;
        justify-content: center; // 添加水平居中
        font-size: 16px; // 统一图标大小
      }
    }

    // 4. 控制图标和文字的样式
    i {
      font-size: 16px;
    }

    span {
      font-size: 12px;
      line-height: 1;
      display: flex; // 添加 flex 布局
      align-items: center; // 垂直居中对齐
    }

    // 5. 激活状态的样式
    &.is-checked {
      background-color: #ecf5ff;
      color: #409eff;
      border-radius: 5px;
      // 如果选中时分隔线颜色也想变蓝
      border-right-color: #a0cfff;

      &+.map-control-item {
        border-left: 1px solid #a0cfff;
        margin-left: -1px;
      }
    }
  }

  .road-net-item {
    background-color: #ffffff;
    transform: translateX(100%);
    border-radius: 5px;
    opacity: 0;
    transition: all 0.3s ease;
    position: absolute;
    left: -100px; // 修改初始位置
    pointer-events: none; // 默认不可点击

    &.show-roadnet {
      transform: translateX(30%);
      opacity: 1;
      pointer-events: auto; // 显示时可点击
    }
  }

  .map-control-item.is-checked~.road-net-item {
    transform: translateX(0);
    opacity: 1;
  }
}

.traffic-control {
  display: none;
  position: fixed;
  top: 80px;
  right: 100px;
  z-index: 999;
  width: 340px;
  height: 82px;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 12px;

  &.show-traffic {
    display: block;
  }

  .traffic-control-info {
    display: flex;
    align-items: center;
    gap: 20px;

    .traffic-control-info-title {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: bold;
      width: 48px;
      height: 28px;
      color: #fff;
      background-color: #0f89f5;
    }

    .level {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 3px;
    }

    .level-1 {
      width: 25px;
      height: 6px;
      background-color: #34b000;
    }

    .level-2 {
      width: 25px;
      height: 6px;
      background-color: #fecb00;
    }

    .level-3 {
      width: 25px;
      height: 6px;
      background-color: #df0100;
    }

    .level-4 {
      width: 25px;
      height: 6px;
      background-color: #8e0e0b;
    }
  }

  .traffic-control-time {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #999;
    margin-top: 10px;
  }
}
</style>
